<style lang="scss" scoped>
@import '../../style/mixin-rem.scss';
.book-case-content {
  position: fixed;
  top: rem(86px);
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  padding: 0 rem(50px) 0 rem(40px);
  .content {
    padding-top: rem(10px);
    padding-bottom: rem(150px);
  }
}
</style>

<template>
  <div class="book-case-content" ref="wrapper">
    <div class="content">
      <item
        v-for="(item, index) of booklist"
        :key="item.id"
        :index="index"
        :title="item.title"
        :author="item.author"
        :chapter="item.chapter"
        :cover="item.cover"/>
    </div>
    <isNullTip v-show="booklist.length === 0"/>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import item from './BookCaseContentItem'
import isNullTip from './BookCaseContentIsNullTip'
export default {
  name: 'bookCaseContent',
  components: {
    item,
    isNullTip
  },
  data () {
    return {
      BScroll: {}
    }
  },
  computed: {
    booklist () {
      return this.$store.state.bookCase.content
    }
  },
  created () {
    this.$store.commit('bookCase/initBookCase')
  },
  mounted () {
    this.$nextTick(
      this.initBScroll()
    )
  },
  methods: {
    initBScroll () {
      let wrapper = this.$refs.wrapper
      this.BScroll = new BScroll(wrapper, {
        click: true
      })
    }
  }
}
</script>
